<template>
  <template v-for="group in menuList" :key="group.path">
    <a-menu-item :key="group.path" v-if="!group.list">
      <template v-if="group.icon" #icon>
        <i class="iconfont" :class="group.icon"></i>
      </template>
      <router-link :to="{name: group.name, query: {page: group.page}}">{{group.label}}</router-link>
    </a-menu-item>
    <a-sub-menu :key="group.path" v-else-if="group.list.length>0">
      <template #title>{{group.label}}</template>
      <template v-if="group.icon" #icon>
        <i class="iconfont" :class="group.icon"></i>
      </template>
      <menu-item-component :menu-list="group.list"></menu-item-component>
    </a-sub-menu>
  </template>
</template>

<script setup lang="ts">
import {PropType} from "vue";
import {MenuItem} from "../types/common";

const props = defineProps({
  menuList: {
    type: Array as PropType<MenuItem[]>,
    default: () => {
      return []
    }
  }
})

</script>

<style scoped>
.iconfont{
  font-size: 18px !important;
}
</style>
